$zindex-tooltip: 1000
$line-height-base: 1rem
$tooltip-color: $text-reverse
$tooltip-bg-color: rgba(0, 0, 0, .75)
$tooltip-arrow-width: 4px
$tooltip-arrow-color: $tooltip-bg-color
$tooltip-arrow-outer-width: $tooltip-arrow-width + 1px
$tooltip-arrow-outer-color: $border-default
$tooltip-distance: $tooltip-arrow-width + 4px

.fui-tooltip
  position: relative
  margin: 1px
  user-select: text
  white-space: normal
  font-size: $font-md
  line-height: $line-height-base
  z-index: $zindex-tooltip

  // Offset the tooltip to account for the tooltip arrow
  &-placement-top,
  &-placement-topLeft,
  &-placement-topRight
    padding-bottom: $tooltip-distance

  &-placement-right,
  &-placement-rightTop,
  &-placement-rightBottom
    padding-left: $tooltip-distance

  &-placement-bottom,
  &-placement-bottomLeft,
  &-placement-bottomRight
    padding-top: $tooltip-distance

  &-placement-left,
  &-placement-leftTop,
  &-placement-leftBottom
    padding-right: $tooltip-distance

  &-inner
    padding: 6px 8px
    background-color: $tooltip-bg-color
    background-clip: padding-box
    border-radius: 0.25rem
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2)
    white-space: pre-wrap
    color: $tooltip-color

  // Arrow
  &-arrow
    &,
    &:after
      position: absolute
      display: block
      width: 0
      height: 0
      border-color: transparent
      border-style: solid

  &-arrow
    border-width: $tooltip-arrow-outer-width

  &-arrow:after
    border-width: $tooltip-arrow-width
    content: ""

  &-placement-top,
  &-placement-topLeft,
  &-placement-topRight
    transform-origin: bottom

  &-placement-top > &-content > &-arrow,
  &-placement-topLeft > &-content >  &-arrow,
  &-placement-topRight > &-content >  &-arrow
    border-bottom-width: 0
    border-top-color: $tooltip-arrow-outer-color
    bottom: $tooltip-distance - $tooltip-arrow-outer-width
    transform-origin: bottom
    &:after
      content: " "
      bottom: 1px
      margin-left: -$tooltip-arrow-width
      border-bottom-width: 0
      border-top-color: $tooltip-arrow-color

  &-placement-top > &-content >  &-arrow
    left: 50%
    margin-left: -$tooltip-arrow-outer-width

  &-placement-topLeft > &-content >  &-arrow
    left: 16px

  &-placement-topRight > &-content >  &-arrow
    right: 16px

  &-placement-right,
  &-placement-rightTop,
  &-placement-rightBottom
    transform-origin: left

  &-placement-right > &-content >  &-arrow,
  &-placement-rightTop > &-content >  &-arrow,
  &-placement-rightBottom > &-content >  &-arrow
    left: $tooltip-distance - $tooltip-arrow-outer-width
    border-left-width: 0
    border-right-color: $tooltip-arrow-outer-color
    &:after
      content: " "
      left: 1px
      bottom: -$tooltip-arrow-width
      border-left-width: 0
      border-right-color: $tooltip-arrow-color

  &-placement-right > &-content >  &-arrow
    top: 50%
    margin-top: -$tooltip-arrow-outer-width

  &-placement-rightTop > &-content >  &-arrow
    top: 12px

  &-placement-rightBottom > &-content >  &-arrow
    bottom: 12px

  &-placement-bottom,
  &-placement-bottomLeft,
  &-placement-bottomRight
    transform-origin: top

  &-placement-bottom > &-content >  &-arrow,
  &-placement-bottomLeft > &-content >  &-arrow,
  &-placement-bottomRight > &-content >  &-arrow
    border-top-width: 0
    border-bottom-color: $tooltip-arrow-outer-color
    top: $tooltip-distance - $tooltip-arrow-outer-width
    &:after
      content: " "
      top: 1px
      margin-left: -$tooltip-arrow-width
      border-top-width: 0
      border-bottom-color: $tooltip-arrow-color

  &-placement-bottom > &-content >  &-arrow
    left: 50%
    margin-left: -$tooltip-arrow-outer-width

  &-placement-bottomLeft > &-content >  &-arrow
    left: 16px

  &-placement-bottomRight > &-content >  &-arrow
    right: 16px

  &-placement-left,
  &-placement-leftTop,
  &-placement-leftBottom
    transform-origin: right

  &-placement-left > &-content >  &-arrow,
  &-placement-leftTop > &-content >  &-arrow,
  &-placement-leftBottom > &-content >  &-arrow
    right: $tooltip-distance - $tooltip-arrow-outer-width
    border-right-width: 0
    border-left-color: $tooltip-arrow-outer-color
    &:after
      content: " "
      right: 1px
      border-right-width: 0
      border-left-color: $tooltip-arrow-color
      bottom: -$tooltip-arrow-width

  &-placement-left > &-content >  &-arrow
    top: 50%
    margin-top: -$tooltip-arrow-outer-width

  &-placement-leftTop > &-content >  &-arrow
    top: 12px

  &-placement-leftBottom > &-content >  &-arrow
    bottom: 12px
